<template>
    <div class="vehicle-list">
		<nav-header>
            <template slot="menuBefore">
                <div class="th-title-icon">
                    <el-button
                        @click="fieldsTips = true"
                        icon="el-icon-warning"
                        circle title="提示" size="mini" >
                    </el-button>
                </div>
            </template>
        </nav-header>

		<div class="zh-table">
            <div class="zh-table-open clear">
                <div class="zh-open-left fl">
                    <div class="open-width" style="width: 145px">
                        <el-select v-model="listParam.stateId" filterable placeholder="请选择状态">
                            <el-option
                                v-for="item in stateList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="open-width" style="width: 145px">
                        <el-select v-model="listParam.modelId" filterable placeholder="请选择车型">
                            <el-option
                                v-for="item in modelList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </div>

                    <div class="open-width">
                        <el-input v-model="listParam.keyword" @keyup.enter.native="searchFunc" placeholder="搜索厂牌型号、车牌号"></el-input>
                    </div>
                    <el-button type="primary" @click="searchFunc">搜索</el-button>
                    <el-button type="primary" @click="resetList">重置</el-button>
                </div>
                <div class="zh-open-right fr">
                    <el-button type="primary" @click="newCar">新增车辆</el-button>               
                    <el-button type="danger" @click="dleteAllConfirm">批量删除</el-button>
                </div>
            </div>

            <div class="zh-table-contents" v-loading="loading.status" :element-loading-text="loading.txt">
                <el-table
                    :data="listData"
                    fixed
                    border
                    max-height="600"
                    @selection-11="tableSelectionChange"
                    style="width: 100%">
                    <el-table-column
                        type="selection"
                        width="50"
                        align="center"
                        fixed>
                    </el-table-column>
                    <el-table-column
                        prop="brand"
                        label="厂牌型号"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="number"
                        label="车牌号"
                        align="center"
                        width="200"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="type_name"
                        label="车型"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop=""
                        label="车辆性质"
                        align="center"
                        show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{scope.row.property === 1 ? '职务配车' : '公务用车'}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop=""
                        label="持有人"
                        align="center"
                        width="200"
                        show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{scope.row.user_name ? scope.row.user_name : '-'}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop=""
                        label="状态"
                        align="center"
                        width="140"
                        show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{getStateName(scope.row.status)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        align="center"
                        :width="240">
                        <template slot-scope="scope">
                            <el-button @click="goToDetail(scope.row.id)" type="text">详情</el-button>
                            <el-button v-if="scope.row.status === 2" @click="changeLend(scope.row)" type="text">借出</el-button>
                            <el-button 
                                v-if="scope.row.status === 2" 
                                @click="setEnable(scope.row.id, 3)" 
                                type="text" 
                                class="delete-button">停用
                            </el-button>
                            <el-button v-if="scope.row.status === 1" @click="changeRemand(scope.row)" type="text">归还</el-button>
                            <el-button 
                                v-if="scope.row.status === 3" 
                                @click="setEnable(scope.row.id, 2)" 
                                type="text" 
                                class="delete-button">启用
                            </el-button>
                            <el-button @click="deleteRowConfirm(scope.row.id)" type="text" class="delete-button">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="table-pagination" v-show="totalNumber > 10">
                    <el-pagination
                        @size-change="changeCurrentSize"
                        @current-change="changeCurrentPage"
                        :current-page="listParam.pageIndex"
                        :page-sizes="[10, 20, 30, 40, 50, 100]"
                        :page-size="listParam.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalNumber">
                    </el-pagination>
                </div>
            </div>
        </div>

        <el-dialog
            title="借出"
            class="lend-vehicle"
            :width="approval ? '500px' : '800px'"
            :visible.sync="lendVisible"
            :close-on-click-modal="false">
            <div :class="approval ? '' : 'show-preview'">
                <div class="lend-item">
                    <span>类型：</span>
                    <el-select v-model="lendParam.type" @change="changeType">
                        <el-option label="线下审批" value="2"></el-option>
                        <el-option label="线上审批" value="1"></el-option>
                    </el-select>
                </div>
                <div class="lend-item" v-if="lendParam.type == 2">
                    <span>用车人：</span>
                    <el-autocomplete
                        v-model="lendParam.userName"
                        :fetch-suggestions="querySearchAsync"
                        placeholder="输入账户、用户名"
                        @select="selectNumber">
                    </el-autocomplete>
                </div>
                <div class="lend-item" v-if="lendParam.type == 1">
                    <span>审批编号：</span>
                    <div>
                        <el-input v-model="lendParam.number" @blur="checkApproval">
                            <i 
                                v-if="isCheck === 1" 
                                slot="suffix" 
                                class="el-input__icon el-icon-success"
                                style="color: #67c23a;font-size: 18px;">
                            </i>
                            <i 
                                v-if="isCheck === 2" 
                                slot="suffix" 
                                class="el-input__icon el-icon-error"
                                style="color: #f56c6c;font-size: 18px;">
                            </i>
                        </el-input>
                        <span class="approval-bnt" @click="previewApproval">{{approval ? '预览审批' : '收起审批'}}</span>
                    </div>
                </div>
                <div class="lend-item" v-if="lendParam.type == 1">
                    <span>使用人：</span>
                    <el-input v-model="lendParam.name" disabled></el-input>
                </div>
                <div class="lend-item">
                    <span>约定归还时间：</span>
                    <el-date-picker
                        v-model="lendParam.lendTime"
                        :picker-options="pickerOptionsStart"
                        popper-class="lend-param-lend-time"
                        type="datetime"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                        @input="changeAbleRange"
                        placeholder="选择时间">
                    </el-date-picker>
                </div>
            </div>

            <div class="approval-detail" v-show="!approval">
                <div class="title clear">
                    <img v-if="approvalData.avatar_path" class="avatar" :src="BASE_URL + approvalData.avatar_path" alt="申请人头像">
                    <div>
                        <!-- <p>{{approvalData.username}}</p> -->
                        <p>sdfsdds</p>
                        <p>{{approvalData.examine_status_text}}</p>
                    </div>
                    <img v-if="approvalData.approval_status == 1" class="statusIcon" src="./../../../../static/image/examine/pass.png" alt="通过图标">
                    <img v-if="approvalData.approval_status == 2" class="statusIcon" src="./../../../../static/image/examine/reject.png" alt="拒绝图标">
                    <img v-if="approvalData.approval_status == 3" class="statusIcon" src="./../../../../static/image/examine/cancel_car.png" alt="已撤销图标">
                </div>

                <!-- 审批申请单详情 -->
                <div class="contentDetail">
                    <ul>
                        <li class="clear">
                            <span class="fl">编号：</span>
                            <span class="fl">{{approvalData.identifier}}</span>
                        </li>
                        <li class="clear" v-for="(detailItem, detailKey) in approvalData.form_data" :key="detailKey">
                            <!-- 单行、多行、数字、金额、计算公式输入框 -->
                            <template v-if="detailItem.id == 1 || detailItem.id == 2 || detailItem.id == 3 || detailItem.id == 11 || detailItem.id == 14">
                                <span class="fl">{{detailItem.title}}：</span>
                                <span class="fl">{{detailItem.content}}</span>
                            </template>

                            <!-- 单选、多选框 -->
                            <template v-if="detailItem.id == 4 || detailItem.id == 5">
                                <span class="fl">{{detailItem.title}}：</span>
                                <span class="fl">
                                    <template v-for="(checkItem, inx1) in detailItem.option">
                                        <span v-if="detailItem.content !== undefined && detailItem.content.includes(checkItem.key)" :key="inx1">
                                            {{checkItem.value}}
                                            <span v-if="!detailItem.content.indexOf(checkItem.key) < detailItem.content.length-1">，</span>
                                        </span>
                                    </template>
                                </span>
                            </template>

                            <!-- 日期、日期区间 -->
                            <template v-if="detailItem.id == 6 || detailItem.id == 7">
                                <span class="fl">{{detailItem.title}}：</span>
                                <span class="fl">{{changeDate(detailItem.dateType, detailItem.content)}}</span>
                            </template>

                            <!-- 上传图片 -->
                            <template v-if="detailItem.id == 8">
                                <span class="fl">{{detailItem.title}}：</span>
                                <ul class="fl">
                                    <li v-for="imgURL in detailItem.content" class="fl" :key="imgURL">
                                        <img :src="BASE_URL + imgURL">
                                        <div class="cover">
                                            <i class="el-icon-zoom-in pointer" @click="previewImg(BASE_URL + imgURL)"></i>
                                        </div>
                                    </li>
                                </ul>
                            </template>

                            <!-- 明细 -->
                            <template v-if="detailItem.id == 9">
                                <div class="detail">
                                    <i class="topLine"></i>

                                    <span class="detailTitle">{{detailItem.title}}</span>

                                    <!-- 明细列表 -->
                                    <ul>
                                        <li class="clear" v-for="(mingxiItem,mingxiKey) in detailItem.detail" :key="mingxiKey">
                                            <!-- 单行、多行、数字、金额、计算公式输入框 -->
                                            <template v-if="mingxiItem.id == 1 || mingxiItem.id == 2 || mingxiItem.id == 3 || mingxiItem.id == 11 || mingxiItem.id == 14">
                                                <span class="fl">{{mingxiItem.title}}：</span>
                                                <span class="fl">{{mingxiItem.content}}</span>
                                            </template>

                                            <!-- 单选、多选框 -->
                                            <template v-if="mingxiItem.id == 4 || mingxiItem.id == 5">
                                                <span class="fl">{{mingxiItem.title}}：</span>
                                                <span class="fl">
                                                    <template v-for="(checkItem, inx2) in mingxiItem.option">
                                                        <span v-if="mingxiItem.content !== undefined && mingxiItem.content.includes(checkItem.key)" :key="inx2">
                                                            {{checkItem.value}}
                                                            <span v-if="!mingxiItem.content.indexOf(checkItem.key) < mingxiItem.content.length-1">，</span>
                                                        </span>
                                                    </template>
                                                </span>
                                            </template>

                                            <!-- 日期、日期区间 -->
                                            <template v-if="mingxiItem.id == 6 || mingxiItem.id == 7">
                                                <span class="fl">{{mingxiItem.title}}：</span>
                                                <span class="fl">{{changeDate(mingxiItem.dateType, mingxiItem.content)}}</span>
                                            </template>

                                            <!-- 上传图片 -->
                                            <template v-if="mingxiItem.id == 8">
                                                <span class="fl">{{mingxiItem.title}}：</span>
                                                <ul class="fl">
                                                    <li v-for="imgURL in mingxiItem.content" class="fl" :key="imgURL">
                                                        <img :src="BASE_URL + imgURL">
                                                        <div class="cover">
                                                            <i class="el-icon-zoom-in pointer" @click="previewImg(BASE_URL + imgURL)"></i>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </template>

                                            <!-- 说明文字 -->
                                            <template v-if="mingxiItem.id == 10">
                                                <a class="fl url" :href="mingxiItem.content" :target="mingxiItem.newWindow? '_blank' : '_slef'">{{mingxiItem.title}}</a>
                                            </template>
                                            
                                            <!-- 附件 -->
                                            <template v-if="mingxiItem.id == 12">
                                                <span class="fl">{{mingxiItem.title}}：</span>
                                                <span class="fl"><a class="fl download" title="下载附件" href="">{{mingxiItem.content | filterName}}</a></span>
                                            </template>

                                            <!-- 联系人 -->
                                            <template v-if="mingxiItem.id == 13">
                                                <span class="fl">{{mingxiItem.title}}：</span>
                                                <span class="fl">
                                                    <span v-for="(linkMan, linkKey) in mingxiItem.content" :key="linkKey">{{linkMan.name}} <span v-if="linkKey != mingxiItem.content.length - 1">，</span></span>
                                                </span>
                                            </template>

                                        </li>
                                    </ul>

                                    <i class="bottomLine"></i>
                                </div>
                            </template>

                            <!-- 说明文字 -->
                            <template v-if="detailItem.id == 10">
                                <a class="fl url" :href="detailItem.content" :target="detailItem.newWindow? '_blank' : '_slef'">{{detailItem.title}}</a>
                            </template>
                            
                            <!-- 附件 -->
                            <template v-if="detailItem.id == 12">
                                <span class="fl">{{detailItem.title}}：</span>
                                <span class="fl"><a class="fl download" title="下载附件" href="">{{detailItem.content | filterName}}</a></span>
                            </template>

                            <!-- 联系人 -->
                            <template v-if="detailItem.id == 13">
                                <span class="fl">{{detailItem.title}}：</span>
                                <span class="fl">
                                    <span v-for="(linkMan, linkKey) in detailItem.content" :key="linkKey">{{linkMan.name}} <span v-if="linkKey != detailItem.content.length - 1">，</span></span>
                                </span>
                            </template>

                        </li>
                    </ul>
                </div>

                <!-- 审批流程 -->
                <div class="flow">
                    <ul>
                        <li class="clear" v-for="(flowItem,flowKey) in approvalData.approver" :key="flowKey">
                            <div class="fl left">
                                <img :src="BASE_URL + flowItem.avatar_path" alt="头像">
                                <i></i>
                            </div>

                            <div class="content">
                                <span class="fl name">{{flowItem.approver_name}}</span>
                                <span
                                    :class="{fl: true,
                                        sponsor: flowItem.approver_status == 1,
                                        underway: flowItem.approver_status == 2,
                                        resolve: flowItem.approver_status == 3,
                                        reject: flowItem.approver_status == 4,
                                        revocation: flowItem.approver_status == 5
                                    }">
                                    {{flowItem.approver_status_text}}
                                </span>
                                <span v-if="flowItem.deliver_history && flowItem.deliver_history.length > 0" class="history pointer" @click="showDeliverHistory(flowItem.deliver_history)">转交历史</span>
                                <span v-if="flowItem.time != '0000-00-00 00:00:00'" class="time">{{flowItem.time}}</span>
                                <p v-if="flowItem.comment" :title="flowItem.comment">{{flowItem.comment}}</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

            <div slot="footer" class="dialog-footer">
                <el-button @click="lendVisible = false">取消</el-button>
                <el-button type="primary" @click="submitLend">确定</el-button>
            </div>
        </el-dialog>

        <el-dialog
            title="归还"
            class="remand-vehicle"
            width="550px"
            :visible.sync="remandVisible"
            :close-on-click-modal="false">
            <div class="remand-item">
                <span>使用人：</span><span>{{remandParam.name}}</span>
            </div>
            <div class="remand-item">
                <span>归还时间：</span><span>{{remandParam.time}}</span>
            </div>
            <div class="remand-item">
                <span>使用情况：</span>
                <el-radio-group v-model="remandParam.state">
                    <el-radio :label="0">无损坏</el-radio>
                    <el-radio :label="1">有损坏</el-radio>
                </el-radio-group>
            </div>
            <div class="remand-item" v-if="remandParam.state === 1">
                <span>损坏情况：</span>
                <el-input
                    type="textarea"
                    placeholder="输入损坏情况"
                    :rows="4"
                    v-model="remandParam.reason"
                    maxlength="100"
                    show-word-limit>
                </el-input>
            </div>
            <div slot="footer" class="dialog-footer">
				<el-button @click="remandVisible = false">取消</el-button>
			    <el-button type="primary" @click="submitRemand">确定</el-button>
			</div>
        </el-dialog>

        <el-dialog
            title="提示"
            :visible.sync="fieldsTips"
            :close-on-click-modal="false" 
            :close-on-press-escape="false"
            width="450px">
            <ul>
                <li style="list-style-type: disc;">若想将损坏车辆恢复使用，需要先把损坏记录标为已处理</li>
                <li style="list-style-type: disc;">填写借出后，该车将在约定时间标位使用中</li>
            </ul>
            <div slot="footer" class="dialog-footer"></div>
        </el-dialog>

        <image-viewer
            v-if="imagePreview.showViewer"
            :initial-index="imageIndex"
            :on-close="closeViewer"
            :url-list="imagePreview.previewSrcList">
        </image-viewer>

        <!-- 转交历史弹窗  -->
        <el-dialog
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :title="'转交历史'"
            :visible.sync="deliverHistoryView"
            width="550px">
            <div class="deliverHistory">
                <ul>
                    <li class="clear" v-for="(histroyItem, histroyKey) in deliverHistory" :key="histroyKey">
                        <div class="fl left">
                            <i></i>
                        </div>
                        <div class="content">
                            <span class="name">{{histroyItem.deliver_name}}</span>
                            <span class="turn">转交给</span>
                            <span class="name">{{histroyItem.approver_name}}</span>
                            <span class="time">{{histroyItem.deliver_time}}</span>
                            <p v-if="histroyItem.comment">{{histroyItem.comment}}</p>
                            <i></i>
                        </div>
                    </li>
                </ul>
            </div>
        </el-dialog>
    </div>
</template>

<script> 
export default {
    data() {
        return {
            imagePreview: {
                showViewer: false,
                previewSrcList: []
            },
            approval: true, // 是否预览
            lendVisible: false, // 状态弹框
            remandVisible: false, // 归还
            fieldsTips: false, // 提示信息
            imgVisible: false,
            deliverHistoryView: false,
            isCheck: 0, // 验证审批号码
            rowLen: 0, // 要删除数据的长度
            totalNumber: 0, // 车辆列表总数
            lendWidth: '400px',
            imgViewUrl: '',
            selected: [], // 选中的数据
            deliverHistory: [],   // 存放转交历史信息
            listData: [], // 车辆列表
            modelList: [], // 车型列表
            stateList: [{id: 0, name: '全部状态'}, {id: 1, name: '使用中'}, {id: 2, name: '闲置'}, {id: 3, name: '停用'}, {id: 4, name: '损坏'}, {id: 5, name: '报废'}], // 车辆状态列表
            userList: [], // 用车人列表
            approvalData: {
                form_data: []
            }, // 预览审批内容
            loading: {
                status: false, // 是否显示 loading
                txt: '获取数据...' // loading 标题
            },
            pickerOptionsStart: {
                // 限制时间
                selectableRange: [`${timestampToTime().substr(10)} - 23:59:59`],
                // 限制日期
                disabledDate: (time) => {
                    return time.getTime() < parseInt(Date.now() - 8.64e7);
                },
            },
            listParam: {
                keyword: '', //  关键字
                stateId: 0, // 车辆状态
                modelId: 0, // 车型
                pageSize: 10, // 单页条数
                pageIndex: 1 // 翻页
            },
            remandParam: {
                car_id: null,
                use_id: null,
                name: '',
                time: '',
                state: 0,
                reason: ''
            },
            lendParam: {
                id: undefined,
                user_id: undefined,
                type: '2',
                userName: '',
                number: '',
                name: '',
                lendTime: ''
            },
        }
    },
    created() {
        this.getList();
        this.getModeList();
    },
    filters:{
        filterName(val){
            let idx = val.lastIndexOf('/');
            return val.slice(idx+1);
        }
    },
    computed: {
        /**
         * 根据状态获取名字
         * @param {Number} val 状态id
         */
        getStateName() {
            return (val) => {
                let res = this.stateList.filter(item => item.id === val)[0];
                return res ? res.name : '';
            }
        },
        // 返回日期格式
        changeDate(){
            return function(type,time){
                let dateData = new Date(+time);

                let year = dateData.getFullYear(),
                    month = dateData.getMonth() + 1,
                    day = dateData.getDate(),
                    hour = dateData.getHours(),
                    min = dateData.getMinutes();


                // 补零操作
                month = month > 9 ? month : '0' + month; 
                day = day > 9 ? day : '0' + day; 
                hour = hour > 9 ? hour : '0' + hour; 
                min =  min > 9 ? min : '0' + min; 

                let date = year + '.' + month + '.' + day;

                return type == 1 ? date : date + ' ' + hour + ':' + min;
            }
        },
        imageIndex() {
            return this.imagePreview.previewSrcList.indexOf(this.imgViewUrl);
        }
    },
    methods: {
        /**
         * 根据时间切换当前时间是否可选
         */
        changeAbleRange(val) {
            let nowDay = new Date().toJSON().substr(0, 10);
            let nowVal = val.substr(0, 10);

            if (nowDay == nowVal) {
                if (this.pickerOptionsStart.selectableRange.join() !== `${timestampToTime().substr(10)} - 23:59:59`) {
                    this.pickerOptionsStart.selectableRange = [`${timestampToTime().substr(10)} - 23:59:59`];
                    this.lendParam.lendTime = nowVal + timestampToTime().substr(10);
                }
            } else {
                if (this.pickerOptionsStart.selectableRange.join() !== '00:00:00 - 23:59:59') {
                    this.pickerOptionsStart.selectableRange = [`00:00:00 - 23:59:59`];
                    this.lendParam.lendTime = nowVal + ' 00:00:00';
                }
            }
        },
        /**
         * 弹出预览图片窗口
         */
        previewImg(url){
            this.imgViewUrl = url;
            this.imagePreview.showViewer = true;
            this.imagePreview.previewSrcList = [url];
        },
        closeViewer() {
            this.imagePreview.showViewer = false;
        },
        /**
         * 显示转交历史
         */
        showDeliverHistory(history){
            this.deliverHistory = history;
            this.deliverHistoryView = true;
        },
        /**
         * 获取车辆列表
         */
        getList() {
            this.loading.status = true;

            let success = (res=>{
                this.loading.status = false;
                this.listData = res.data.data;
                this.totalNumber = res.data.data_sum;
            })
            let params = {
                page_index: this.listParam.pageIndex,
                page_size: this.listParam.pageSize,
                status: this.listParam.stateId,
                type_id: this.listParam.modelId,
                keyword: this.listParam.keyword,
                with_image: 0 // 是否获取图片（1：是，0：否）
            }

            this.$ajax.get('api/car/lists',{params, func:{success: success}})
        },
        /**
         * 获取车辆类型列表
         */
        getModeList() {
            const success = (res=>{
                this.modelList = res.data;
                this.modelList.unshift({
                    id: 0, 
                    name: '全部车型'
                })
            })
            const params = {
                in_use: 0 // 是否已有汽车类型（1：是，0：否（默认））
            }

            this.$ajax.get('api/car/typelists', {func: {success: success}})
        },
        /**
         * 搜索列表
         */
        searchFunc() {
            this.listParam.pageIndex = 1;
            this.getList();
        },
        /**
         * 重置列表数据
         */
        resetList() {
            this.listParam = {
                keyword: '',
                stateId: 0,
                modelId: 0,
                pageSize: 10,
                pageIndex: 1
            }

            this.getList();
        },
        /**
         * 是否删除该数据
         * @param {Number} id 要删除数据的 id
         */
        deleteRowConfirm(id) {
            let yes = (res => {
                this.rowLen = 1;

                this.deleteData(id);
            })
            let cancel = (res => {})

            this.e_confirm({yes: yes, cancel: cancel, txt: '是否删除该车辆?'});
        },
        /**
         * 是否确定批量删除
         */
        dleteAllConfirm() {
            if(this.selected.length === 0) {
                this.$message.warning("请选择要删除的项");
                return false;
            }

            let yes = (res => {
                let ids = [];
                this.rowLen = this.selected.length;

                this.selected.forEach(item => {
                    ids.push(item.id);
                })

                this.deleteData(ids);
            })
            let cancel = (res => {})

            this.e_confirm({yes: yes, cancel: cancel, txt: '是否批量删除车辆?'});
        },
        /**
         * 删除数据
         * @param {Number/Array} 要删除数据的 id
         */
        deleteData(id) {
            this.loading.status = true;

            let success = (res => {
                this.$message.success(res.msg);
                
                if (this.listData.length === this.rowLen) {
                    if (this.listParam.pageIndex > 1) {
                        this.listParam.pageIndex-- ;
                    } else {
                        this.listParam.pageIndex = 1;
                    }
                }

                this.getList();
            });
            let fail = (res =>{
                this.loading.status = false;
                this.$message.error(res.msg);
            }) 
            
            this.$ajax.delete('api/car/single', {params: {id}, func: {success: success, fail: fail}})
        },
        /**
         * 借出
         */
        changeLend(item) {
            this.lendVisible = true;
            this.approval = true;
            this.isCheck = 0;

            this.lendParam = {
                id: item.id,
                user_id: null,
                type: '2',
                userName: '',
                number: '',
                name: '',
                lendTime: ''
            }
        },
        /**
         * 改变借出类型
         */
        changeType(val) {
            if (val == 2) {
                this.approval = true;
            }
        },
        /**
         * 验证审批号是否存在
         */
        checkApproval() {
            if (is_empty(this.lendParam.number)) {
                return false;
            }

            const success = (res => {
                if (!is_empty(res.data)) {
                    this.isCheck = 1;
                    this.lendParam.user_id = res.data.id;
                    this.lendParam.name = res.data.create_name;
                    this.approvalData = res.data;
                } else {
                    this.isCheck = 2;
                }
            })
            const fail = (res => {
                this.isCheck = 2;
            })
            const params = {
                identifier: this.lendParam.number
            }

            this.$ajax.get('api/examine/examine', {params, func:{success: success}})
        },
        /**
         * 预览审批
         */
        previewApproval() {
            if (this.isCheck === 1) {
                this.approval = !this.approval;
            }
        },
        /**
         * 选中用车人数据
         * @param {Object} item 选中的信息
         */
        selectNumber(item) {
            this.lendParam.user_id = item.id;
        },
        /**
         * 根据关键字查询数据
         */
        querySearchAsync(queryString, cb) {
            if (this.lendParam.userName !== '') {
                let _this = this;
                let params = {
                    keyword: this.lendParam.userName,
                    // page_index: 1,
                    // page_size: 10
                }
                let success = (res => {
                    let tempList = [];
                    this.userList = res.data;

                    this.userList.forEach(item => {
                        tempList.push({
                            value: `${item.name} / ${item.number} / ${item.role_name.join(' ')}`, 
                            id: item.id
                        })
                    })

                    cb(tempList);
                });

                clearTimeout(this.timer);
                this.timer = setTimeout(() => {
                    _this.$ajax.get('api/car/userlists', {params: params, func: {success: success}});
                }, 500);
            } else {
                cb([]);
            }
        },
        /**
         * 保存借出
         */
        submitLend() {
            if (this.isCheck != 1 && this.lendParam.type == 1) {
                return false;
            }

            const params = {
                car_id: this.lendParam.id,
                user_id: this.lendParam.user_id,
                return_day: this.lendParam.lendTime,
                type: this.lendParam.type,
                identifier: this.lendParam.number
            }

            const success = (res => {
                this.lendVisible = false;
                this.$message.success(res.msg);
                this.getList();
            })

            this.$ajax.post("api/car/usesingle", params, {func: {success: success}});
        },
        /**
         * 归还
         * @param {Object} val 归还信息
         */
        changeRemand(val) {
            const success = (res => {
                this.remandVisible = true;

                this.remandParam = {
                    car_id: val.id,
                    time: val.return_day,
                    name: res.data.name,
                    use_id: val.use_id,
                    state: 0,
                    reason: ''
                }
            })
            const params = {
                car_id: val.id,
                return_day: val.return_day
            }

            this.$ajax.get('api/car/caruser', {params, func: {success: success}})
        },
        /**
         * 保存归还信息
         */
        submitRemand() {
            const params = {
                car_id: this.remandParam.car_id,
                use_id: this.remandParam.use_id,
                back_day: this.remandParam.time,
                is_damage: this.remandParam.state,
                comment: this.remandParam.reason,
            }
            const success = (res => {
                this.remandVisible = false;
                this.$message.success(res.msg);

                this.getList();
            })

            this.$ajax.post("api/car/backsingle", params, {func: {success: success}});
        },
        /**
         * 改变车辆是否可用
         * @param {Number} id 车辆id
         * @param {Number} val 状态
         */
        setEnable(id, val) {
            const success = (res => {
                this.$message.success(res.msg);

                this.getList();
            })
            const params = {
                id,
                stop_status: val
            };

            this.$ajax.post("api/car/stop", params, {func: {success: success}});
        },
        /**
         * 新增车辆 -- 跳转到新增车辆页面
         */
        newCar() {
            this.$router.push('/affairs/vehicle/add-vehicle');
        },
        /**
         * 详情
         * @param {Number} id 详情id
         */
        goToDetail(id) {
            this.$router.push('/affairs/vehicle/vehicle-detail/' + id);
        },
        /**
         * 列表数据多选
         * @param {Array} val 选中数据的数组
         */
        tableSelectionChange(val) {
            this.selected = val;
        },
        /**
         * 设置每页中显示的数据数量
         * @param {Number} val 每页数据条数
         */
        changeCurrentSize(val) {
            this.listParam.pageIndex = 1;
            this.listParam.pageSize = val;

            this.getList();
        },
        /**
         * 切换到第几页数据
         * @param {Number} val 页数
         */
        changeCurrentPage(val) {
            this.listParam.pageIndex = val;

            this.getList();
        },
    },
}
</script>

<style lang="scss">
.lend-param-lend-time{
    .el-picker-panel__footer {
        button:first-child {
            display: none;
        }
    }
}

.vehicle-list {
    .th-title-icon {
        position: absolute;
        top: 0;
        right: 40px;
        
        i {
            color: #DAA017;
        }
    }

    .zh-common-title-text {
        li {
            color: #000 !important;
        }
    }

    .lend-vehicle {
        .lend-item {
            display: flex;
            margin-bottom: 30px;
            color: #000;

            >span {
                width: 110px;
            }

            >div {
                flex: 1;
                width: 0;
            }

            .approval-bnt {
                display: inline-block;
                margin-top: 10px;
                color: #348EFC;
                cursor: pointer;
            }
        }

        .show-preview {
            display: flex;
            flex-wrap: wrap;

            .lend-item {
                width: calc(50% - 25px);
            }

            .lend-item:nth-child(2n -1) {
                margin-right: 50px;
            }
        }
    }

    .remand-vehicle {
        .remand-item {
            position: relative;
            display: flex;
            margin-bottom: 20px;
            color: #000;

            >span:first-child {
                width: 100px;
            }

            .el-textarea {
                flex: 1;
                width: 0;
            }
        }
    }

    .deliverHistory{
        padding: 50px;
        min-height: 204px;
        max-height: 500px;
        overflow-x: hidden;

        >ul{
            >li{
                letter-spacing: 0.11px;
                font-size: 14px;

                .left{
                    width: 36px;

                    >i{
                        position: relative;
                        top: 14px;
                        left: 12px;
                        display: block;
                        width: 12px;
                        height: 12px;
                        border-radius: 50%;
                        overflow: hidden;
                        background: #76a8e6;
                    }

                }

                .content{
                    position: relative;
                    margin-left: 36px;
                    width: 400px;

                    >span{
                        height:40px;
                        line-height: 40px;
                        color: #666666;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        &:first-child{
                            margin-left: 20px;
                        }


                        &.turn{
                            margin: 0 14px;
                            color: #999999;
                        }

                        &.time{
                            margin-left: 72px;
                            font-size: 12px;
                            color: #999999;
                            overflow: hidden;
                        }

                    }

                    >p{
                        margin-left: 20px;
                        min-height: 68px;
                        line-height: 20px;
                        font-size: 14px;
                        color: #000000;
                        overflow: hidden;
                        // white-space: nowrap;
                        // text-overflow: ellipsis;

                    }

                    >i{
                        position: absolute;
                        top: 26px;
                        left: -19px;
                        width: 2px;
                        height: 100%;
                        background: #DDDDDD;
                    }

                }

                &:last-child{
                    .content{
                        >i{
                            display: none;
                        }

                    }

                }

            }

        }

    }

    .picture-preview {
        padding: 10px 0 40px;
        text-align: center;
    }

    // 审批单详情弹窗
    .approval-detail{
        height: 800px;
        overflow-x: hidden;

        >div{
            padding: 20px 30px 20px 43px;
            border-bottom: 1px solid #EFEFEF;
            &:last-child{
                border: 0;
            }

            &.title{
                position: relative;
                display: flex;
                align-items: center;
                height: 60px;
                
                .avatar{
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                    overflow: hidden;
                }

                >div {
                    margin-left: 40px;
                }

                .statusIcon {
                    position: absolute;
                    right: 34px;
                    bottom: -34px;
                }
            }

            // 审批申请单详情
            &.contentDetail{

                >ul{
                    // max-height: 460px;
                    overflow-x: hidden;

                    >li{
                        display: flex;
                        margin-top: 12px;
                        font-size: 16px;
                        line-height: 28px;

                        // 公共板块
                        >span{

                            &:first-child{
                                width: 165px;
                                color: #666666;
                            }

                            &:last-child{
                                flex: 1;
                                margin-left: 16px;
                                width: 530px;
                                max-height: 140px;
                                overflow-x: hidden;
                                color: #000000;

                            }

                        }

                        // 图片列表
                        >ul{
                            width: 500px;

                            li{
                                position: relative;
                                margin: 15px 15px 0 0;
                                border-radius: 6px;
                                overflow: hidden;
                                &:nth-child(-n+3){
                                    margin-top: 0;
                                }

                                &:nth-child(3n){
                                    margin-right: 0;
                                }
                                
                                >img{
                                    width: 150px;
                                    height: 150px;
                                    border: 1px solid #ddd;
                                    border-radius: 6px;
                                    object-fit: cover;
                                }

                                .cover{
                                    display: none;
                                    position: absolute;
                                    top: 0;
                                    bottom: 0;
                                    left: 0;
                                    right: 0;
                                    background: rgba(0,0,0,0.5);

                                    .el-icon-zoom-in{
                                        position: absolute;
                                        top: 50%;
                                        left: 50%;
                                        transform: translate(-50%, -50%);
                                        font-size: 20px;
                                        color: white;
                                    }
                                }

                                &:hover .cover{
                                    display: block;
                                }
                            }
                        }

                        // 说明文字跳转链接
                        .url{
                            color: #666666;

                            &:hover {
                                color: blue;
                            }
                        }

                        // 下载附件
                        .download{
                            &:hover {
                                color: blue;
                            }
                        }

                        // 明细
                        .detail{
                            .topLine{
                                display: block;
                                border-bottom: 2px dashed #ddd;
                            }
                            .bottomLine{
                                display: block;
                                padding-top: 15px;
                                border-bottom: 2px dashed #ddd;
                            }

                            .detailTitle{
                                display: block;
                                padding: 10px 0;
                            }

                            >ul{
                                // max-height: 460px;
                                overflow-x: hidden;

                                >li{
                                    display: flex;
                                    // margin-top: 12px;
                                    font-size: 16px;
                                    line-height: 28px;

                                    // 公共板块
                                    >span{

                                        &:first-child{
                                            margin-left: 30px;
                                            width: 165px;
                                            color: #666666;
                                        }

                                        &:last-child{
                                            flex: 1;
                                            margin-left: 16px;
                                            width: 500px;
                                            max-height: 140px;
                                            overflow-x: hidden;
                                            color: #000000;

                                        }

                                    }

                                    // 图片列表
                                    >ul{
                                        width: 500px;

                                        li{
                                            position: relative;
                                            margin: 15px 15px 0 0;
                                            border-radius: 6px;
                                            overflow: hidden;
                                            &:nth-child(-n+3){
                                                margin-top: 0;
                                            }

                                            &:nth-child(3n){
                                                margin-right: 0;
                                            }
                                            
                                            >img{
                                                width: 150px;
                                                height: 150px;
                                                border: 1px solid #ddd;
                                                border-radius: 6px;
                                                object-fit: cover;
                                            }

                                            .cover{
                                                display: none;
                                                position: absolute;
                                                top: 0;
                                                bottom: 0;
                                                left: 0;
                                                right: 0;
                                                background: rgba(0,0,0,0.5);

                                                .el-icon-zoom-in{
                                                    position: absolute;
                                                    top: 50%;
                                                    left: 50%;
                                                    transform: translate(-50%, -50%);
                                                    font-size: 20px;
                                                    color: white;
                                                }
                                            }

                                            &:hover .cover{
                                                display: block;
                                            }
                                        }
                                    }

                                    // 说明文字跳转链接
                                    .url{
                                        margin-left: 30px;
                                        color: #666666;

                                        &:hover {
                                            color: blue;
                                        }
                                    }

                                    // 下载附件
                                    .download{
                                        &:hover {
                                            color: blue;
                                        }
                                    }

                                    &:first-child{
                                        margin: 0;
                                    }

                                }

                            }

                        }
                        
                        &:first-child{
                            margin: 0;
                        }

                    }

                }

            }

            // 审批流程
            &.flow{

                >ul{

                    >li{
                        letter-spacing: 0.11px;
                        font-size: 14px;

                        .left{

                            >img{
                                width: 40px;
                                height: 40px;
                                border-radius: 50%;
                                overflow: hidden;
                            }

                            >i{
                                margin: 5px 0 5px 19px;
                                display: block;
                                width: 2px;
                                height: 30px;
                                background: #DDDDDD;
                            }

                        }

                        .content{
                            overflow: hidden;

                            >span{
                                height:40px;
                                line-height: 40px;
                                overflow: hidden;
                                text-align: center;
                                text-overflow: ellipsis;
                                white-space: nowrap;

                                &.name{
                                    margin-left: 20px;
                                    width: 80px;
                                    text-align: left;
                                    color: #666666;
                                }
                                
                                // 黑色（发起申请）
                                &.sponsor{
                                    margin: 0 5px;
                                    width: 80px;
                                    font-size: 14px;
                                    text-align: center;
                                    color: #000000;
                                }
                                
                                // 棕色（审批中）
                                &.underway{
                                    margin: 0 5px;
                                    width: 80px;
                                    color: #CC8401;
                                    text-align: center;
                                }
                    
                                // 蓝绿色（已通过）
                                &.resolve{
                                    margin: 0 5px;
                                    width: 80px;
                                    color: #33BBBB;
                                    text-align: center;
                                }
                                
                                // 红色（拒绝）
                                &.reject{
                                    margin: 0 5px;
                                    width: 80px;
                                    color: #CD5B72;
                                    text-align: center;
                                }

                                // 灰色（已撤销）
                                &.revocation{
                                    margin: 0 5px;
                                    width: 80px;
                                    color: #eee;
                                    text-align: center;
                                }

                                &.history{
                                    color: #348EFC;
                                }

                                &.time{
                                    margin-left: 10px;
                                    font-size: 12px;
                                    color: #999999;
                                    overflow: hidden;
                                }

                            }

                            >p{
                                margin-left: 20px;
                                line-height: 20px;
                                font-size: 14px;
                                color: #333333;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }

                        }

                        &:last-child{
                            .left{
                                >i{
                                    display: none;
                                }
                            }
                        }

                    }

                }

            }

        }
        
    }
}
</style>
